<template>
  <div class="shop">
    <el-button class="addBtn" type="primary" @click="isShowBanner = true">新增</el-button>
    <el-table
      :data="tableData"
      style="width:100%"
      class="banner_table"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="ID" ></el-table-column>

      <el-table-column label="轮播图片" >
        <template slot-scope="scope">
          <div @click="lookBigPicture(scope.row.thumb)" class="look_picture">
            <img
              style="width:100px; vertical-align:middle"
              :preview="scope.$index"
              :preview-text="scope.row.title"
              :src="scope.row.thumb ? scope.row.thumb : errorImg"
              alt
            />
            <p v-if="scope.row.thumb" class="lookbig">(查看大图)</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="展示顺序" ></el-table-column>
      <el-table-column label="跳转类型" >
        <template slot-scope="scope">
          <p v-if="scope.row.type == 1">内部链接</p>
          <p v-if="scope.row.type == 2">外部链接</p>
        </template>
      </el-table-column>
      <el-table-column label="状态" >
        <template slot-scope="scope">
          <el-switch
            :key="scope.row.id"
            :active-value="2"
            :inactive-value="1"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch>
          <p class="status—desc" v-if="scope.row.status == 2">上线中</p>
          <p class="status—desc" v-if="scope.row.status == 1">下线中</p>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" ></el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button size="mini" @click="editDisplayDetail(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteDisplay(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>


   <jdialog title="新增轮播图" :visible.sync="isShowBanner" width="600px">
     <el-form class="add_moban_form">
        <el-form-item label="轮播图片:">
          <uploadImg
            flieName="thumb"
            class="icon_cate"
            :oldImgs="[addform.thumb]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">支持上传png,jpg,gif格式的图片</p>
          <p class="note">建议图片尺寸：400*200px</p>
        </el-form-item>
        <el-form-item label="跳转类型:">
          <el-select style="width:130px;" v-model="addform.type" filterable placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.status"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接地址:">
          <el-input style="width:70%;" type="text" placeholder="请输入链接地址" v-model="addform.href"></el-input>
        </el-form-item>
        <el-form-item label="展示排序:">
          <el-input style="width:70%;" type="text" placeholder="请输入0～4数值" v-model="addform.sort"></el-input>
          <p class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数值越大越靠前显示</p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        
      </span>
       <div  class="dialog-footer">
        <el-button size='mini' @click="isShowBanner = false">取 消</el-button>
        <el-button size='mini' type="primary" @click="addShopCategory">确 定</el-button>
      </div>
   </jdialog>
  </div>
</template>

<script>
import {
  bannerList,
  bannerUpDown,
  bannerDelete,
  bannerAddmodify
} from "@/api/setting";
import errorImg from "@/assets/images/error_img.png";
import uploadImg from "@/components/uploadImg";
export default {
  components: {
    uploadImg
  },
  data() {
    return {
      errorImg,
      page: 1,
      size: 20,
      total: 0,
      tableData: [],
      statusList: [
        { id: 2, status: "外部链接" },
        { id: 1, status: "内部链接" }
      ],
      isShowBanner: false,
      addform: {
        type: "",
        href: "",
        thumb: "",
        sort: "",
        id: ""
      }
    };
  },
  mounted() {
    this.getBannerListData();
  },
  methods: {
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleSizeChange(val) {
      this.size = val;
      this.pageChange(1);
    },
    pageChange(page) {
      this.page = page;
      this.getBannerListData();
    },

    //查看大图
    lookBigPicture(url) {
      this.$alert(`<img src="${url}"/>`, {
        dangerouslyUseHTMLString: true
      });
    },
    isUseActivityChange(id, e) {
      //更新成功后重新获取商品
      this.getbannerUpDownData(id, e);
    },

    editDisplayDetail(obj) {
      this.addform = obj;
      console.log(this.addform)
      this.isShowBanner = true;
    },

    deleteDisplay(id) {
      this.getbannerDeleteData(id);
    },

    addShopCategory() {
      this.getbannerAddmodifyData();
    },
    async getBannerListData() {
      let res = await bannerList({ page: this.page, size: this.size });
      console.log(res);
      if (res.code === 10000) {
        this.total = res.data.total;
        this.tableData = res.data.data;
      } else {
        this.$message.error(res.message);
      }
    },

    async getbannerUpDownData(id, e) {
      let res = await bannerUpDown({ id: id, status: e });
      if (res.code === 10000) {
        if (e === 2) {
          this.$message.success("上架成功");
        } else {
          this.$message.success("下架成功");
        }
        this.getBannerListData();
      } else {
        this.$message.error(res.message);
      }
    },
    getFile(file) {
      console.log(file);
      this.addform[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },
    async getbannerDeleteData(id) {
      let res = await bannerDelete({ id: id });
      if (res.code === 10000) {
        this.$message.success("删除成功");
        this.getBannerListData();
      } else {
        this.$message.error(res.message);
      }
    },
    async getbannerAddmodifyData() {
      let res = await bannerAddmodify(this.addform);
      if (res.code === 10000) {
       
          this.$message.success("成功");
       
        this.isShowBanner = false;
        this.addform = {};
        this.getBannerListData();
      } else {
        this.$message.error(res.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .look_picture {
    text-align: center;
    cursor: pointer;
    vertical-align:middle
  }
  .addBtn {
    position: absolute;
    right: 21px;
    top: 20px;
  }
  .lookbig {
    font-weight: 400;
    color: #f4222d;
    cursor: pointer;
  }
  .note{
    color:#999999;
    font-size: 14px;
  }
  .status—desc {
    display: inline;
    margin-left: 5px;
  }
  .banner_table{
      margin-top: 50px;
  }
  .icon_cate {
    float: left;
  }
  .pagination {
    float: right;
  }
   .add_moban_form{
    padding: 20px 20px 0;
  }
  .dialog-footer{
    margin: 20px 0;
    text-align: center;
  }
}
</style>